<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" name="" id="btn" >
    <input type="checkbox" class="ck" name="" id="">
    <input type="checkbox" class="ck" name="" id="">
    <input type="checkbox" class="ck" name="" id="">
</body>
<script>
    // 获取按钮 注册事件
    var btn = document.getElementById('btn');
    var cks = document.getElementsByClassName('ck');
    // 点击全选按钮的时候所有的子项按钮也全部勾选上
    btn.onclick = function(){
        if(btn.checked){
            for(var i = 0; i < cks.length; i++){
                cks[i].checked = true;
            }
        }else{
            for(var i = 0; i < cks.length; i++){
                cks[i].checked = false;

            }
        }
    }
    // 如果全部的子项按钮全部勾选 全选按钮也选上
    for(var i = 0; i < cks.length; i++){
        cks[i].onclick = function(){
             var isGouXuan = true;
             for(var i = 0; i < cks.length; i++){
                 if(cks[i].checked === false){
                     isGouXuan = false;
                     break;
                 }
                                 
             }
             if(isGouXuan === true){
                    btn.checked = true;
                }else{
                    btn.checked = false ;
                }
        }
    }

</script>
</html>